import React, { useState,useEffect } from 'react';

const Left = (props) => {
	const [num,setNum] = useState(0);
	const [newsList,setNewsList] = useState([]);

	const add = () => {
		setNum(num+1);
	}

	useEffect(() => {
		console.log('left')

		return () => {//相当于卸载组件时执行
			console.log('bye')
		}
	},[])

	useEffect(() => {
		fetch('http://8.142.171.141:8080/school-news/news/pageList?newsType=&newsTitle=&page=1')
		.then(res => res.json())
		.then(res => {
			console.log(res.data)
			setNewsList(res.data.content)
		})
	},[])

	return <div style={{width:600,height:500,backgroundColor:'rosybrown'}}>
		Left:{props.title}
		<h2>{num}</h2>
		<button onClick={add}>add</button>
		<ul>
			{
				newsList.map(item => {
					return <li key={item.id}>
						{item.newsTitle}
					</li>
				})
			}
		</ul>
	</div>
}

const Right = ({title,content,children}) => {
	return <div style={{width:200,height:500,backgroundColor:'royalblue'}}>
		Right:<h2>{title}</h2> {content} {children}
	</div>
}

const App = () => {
	const [left,setLeft] = useState(false);

	const click = () => {
		setLeft(!left);
	}

	useEffect(() => {
		console.log('app')
	})

	return (
		<div>
			<h2>hello</h2>
			<button onClick={click}>隐藏Left</button>
			<div className='con' style={{display:'flex',flexDirection:'row'}}>
				{
					left?<Left title='123' />:null
				}
				<Right title='hello' content={<h3>world</h3>} />
				<Right>
					<h1>666666</h1>{/*在双标签中传递的组件通过children拿到*/}
				</Right>
			</div>
		</div>
	)
}

export default App;